<template>
	<view class="content bg-content">
		<load :ready="loading"></load>
		<block v-if="info">
			<view class="top bgf flex-bt">
				<text>交易状态</text>
				<text class="red" v-if="info.order_state == 0">已取消</text>
				<text class="red" v-if="info.order_state == 10">未付款</text>
				<text class="red" v-if="info.order_state == 20">已付款</text>
				<text class="red" v-if="info.order_state == 40">已完成</text>
			</view>
			<!-- <view class="address bgf" v-if="order != 3">
				<view class="p">
					收货人：{{info.extend_order_common.reciver_name}} <text>{{info.extend_order_common.reciver_info.tel_number}}</text>
				</view>
				<view class="p" style="color:rgba(0,0,0,.3);margin-top: 16rpx;">
					{{info.extend_order_common.reciver_info.address}}
				</view>
			</view> -->
			<view class="mid bgf">
				<view class="shop-msg flex">
					<image :src="info.goods_image" mode="aspectFill" class="img"></image>
					<view class="font">
						<view class="h3 ">
							<view class="line1">
								{{info.goods_name}}
							</view>
						</view>
						<view class="step flex-bt">
							<view class="price">
								¥{{info.goods_price}}
							</view>
							<view class="num">
								{{info.goods_num}}件
							</view>
						</view>
					</view>
				</view>
				<view class="p flex-bt"  v-if="order != 3">
					<text>运费：</text>
					<text>{{info.shipping_fee}}元</text>
				</view>
			</view>
			<view class="bgf code-wrap" v-if="order == 3">
				<view class="h3">
					买家信息
				</view>
				<view class="p">
					买家昵称：{{info.buyer_name}}
				</view>
				<view class="p">
					买家手机号：{{info.buyer_phone}}
				</view>
				<view class="p">
					兑换码状态：{{info.use_state == 0 ? '未使用':'已使用'}}
				</view>
				<view class="p">
					兑换码有效期：{{info.vr_indate}}
				</view>
			</view>
			<view class="bgf bottom">
				<view class="p">
					订单编号：{{info.order_sn}}
				</view>
				<view class="p">
					创建时间：{{info.add_time}}
				</view>
				<view class="p">
					备注：{{info.buyer_msg}}
				</view>
				<view class="p" v-if="info.payment_code">
					支付方式：
					<text v-if="info.payment_code == 'predeposit'">站内余额支付</text>
					<text v-if="info.payment_code == 'award'">可用余额支付</text>
					<text v-if="info.payment_code == 'alipay'">支付宝支付</text>
				</view>
				<view class="p" v-if="info.payment_time">
					支付时间：{{info.payment_time}}
				</view>
				<view class="p" v-if="info.finnshed_time">
					完成时间：{{info.finnshed_time}}
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import { vrOrder_info,order_info } from '@/config/user/api';
	export default {
			data() {
				return {
					show:false,
					loading:true,
					info:'',
					id:'',
					order:'',
				}
			},
			components: {
			},
			onLoad(o) {
				if (!o.id) {
				    this.$common.showTip('当前参数错误！');
				    setTimeout(() => {
				        this.$common.goback();
				    }, 2000);
				    return false;
				};
				this.id = o.id;
				this.order = o.order
				this.getInfo();
			},
			onShareAppMessage() {
			},
			watch:{
			},
			computed: {
				...mapState({
					userInfo: 'userInfo',
				})
			},
			methods: {	
				async getInfo(){
					const that = this;
					let paramData = {
						order_id:that.id
					};
					const res = await vrOrder_info(paramData);
					that.loading = false;
					if (res.code != 1) {
						that.$common.showTip(res.msg, 'none')
						return
					};
					that.info = res.data;
				},
				copy(text){
					const that = this;
					uni.setClipboardData({
						data: text,
						success() {
							console.log('复制成功');
							that.$common.showTip('复制成功');
						}
					})
				},
				back(){
					this.$common.goback()
				},
				...mapMutations(['setUserInfo'])
			}
		}
	
</script>

<style scoped lang="scss">
	.code-wrap{
		.h3{
			font-size: 30rpx;
			font-weight: bold;
			color: $black;
		}
		.code{
			width: 250rpx;
			margin: 30rpx auto;
		}
		.p{
			font-size: 28rpx;
			color: #999;
			margin-top: 15rpx;
			.black{
				font-weight: bold;
				color: $black;
			}
			.red{
				margin-left: 20rpx;
			}
		}
	}
	.bgf{
		background: #fff;
		margin-bottom: 20rpx;
		padding: 30rpx;
	}
	.top{
		font-size: $font-b;
		color: $black;
	}
	.address{
		font-size: $font-b;
		color: $black;
	}
	.mid{
		padding-top: 0;
		.p{
			padding: 30rpx 0 0;
			font-size: $font-b;
			color: $black;
		}
	}
	.bottom{
		font-size: $font-b;
		color: $black;
		.p{
			margin-bottom: 32rpx;
			&:last-of-type{
				margin-bottom: 0;
			}
		}
	}
	.shop-msg{
		padding: 24rpx 0;
		border-bottom: solid 1px #f5f5f5;
		.img{
			width: 128rpx;
			height: 128rpx;
			border-radius:16rpx;
			margin-right: 24rpx;
		}
		.font{
			flex: 1;
			width:0;
			.h3{
				font-weight: 400;
				font-size: $font-b;
				line-height: 150%;
				color: #000000;
				margin-bottom: 16rpx;
			}
			.p{
				font-weight: 300;
				font-size: $font-s;
				line-height: 150%;
				color: #666666;
				margin-bottom: 32rpx;
			}
			.price{
				font-size: $font-b;
				line-height: 140%;
			}
			.num{
				font-size: $font-b;
				color: $black;
			}
		}
	}
</style>